<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能数据分析 - 共享充电宝数据仓库</title>
    
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <!-- 中国地图数据 -->
    <script src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/map/js/china.js"></script>

    <!-- PDF导出库 - 使用稳定版本 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

    <!-- 基础样式 -->
    <style>
        [v-cloak] { display: none; }
    </style>
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="./styles/main.css">
    <link rel="stylesheet" href="./styles/ai-analysis.css">
</head>
<body>
    <div id="ai-analysis-app" v-cloak>
        <!-- 页面头部 -->
        <header class="dashboard-header">
            <div class="header-content">
                <h1 class="title">
                    <i class="icon">🤖</i>
                    AI智能数据分析
                </h1>
                <div class="header-info">
                    <button @click="goBack" class="back-btn">
                        ← 返回大屏
                    </button>
                    <span class="time">{{ currentTime }}</span>
                    <span class="status" :class="{ 'online': isOnline, 'offline': !isOnline }">
                        {{ isOnline ? 'AI就绪' : '连接断开' }}
                    </span>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="ai-main">
            <!-- 数据选择区域 -->
            <div class="data-selection-section">
                <div class="section-card">
                    <h3 class="section-title">📊 选择分析数据</h3>
                    <div class="data-options">
                        <div class="data-option" 
                             v-for="option in dataOptions" 
                             :key="option.key"
                             :class="{ 'selected': selectedData.includes(option.key) }"
                             @click="toggleDataSelection(option.key)">
                            <div class="option-icon">{{ option.icon }}</div>
                            <div class="option-content">
                                <h4>{{ option.name }}</h4>
                                <p>{{ option.description }}</p>
                                <span class="record-count">{{ option.records }}条记录</span>
                                <button @click.stop="browseData(option.key)" class="browse-btn">
                                    👁️ 浏览数据
                                </button>
                            </div>
                            <div class="option-checkbox">
                                <i v-if="selectedData.includes(option.key)">✓</i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="action-buttons">
                        <button @click="startAnalysis"
                                :disabled="selectedData.length === 0 || analyzing"
                                class="analyze-btn">
                            <span v-if="analyzing">🔄 分析中...</span>
                            <span v-else>🚀 开始AI分析</span>
                        </button>
                        <button @click="clearSelection"
                                :disabled="selectedData.length === 0"
                                class="clear-btn">
                            🗑️ 清空选择
                        </button>
                    </div>

                    <!-- 分析进度显示 -->
                    <div v-if="analyzing && analysisProgress.total > 0" class="analysis-progress">
                        <div class="progress-header">
                            <h4>🔍 AI分析进度</h4>
                            <span class="progress-stats">{{ analysisProgress.current }}/{{ analysisProgress.total }}</span>
                        </div>

                        <div class="progress-bar-container">
                            <div class="progress-bar">
                                <div class="progress-fill"
                                     :style="{ width: (analysisProgress.current / analysisProgress.total * 100) + '%' }">
                                </div>
                            </div>
                            <span class="progress-percentage">
                                {{ Math.round(analysisProgress.current / analysisProgress.total * 100) }}%
                            </span>
                        </div>

                        <div class="progress-details">
                            <div class="current-task">
                                <span class="task-icon">⚡</span>
                                <span class="task-name">{{ analysisProgress.currentTask }}</span>
                            </div>
                            <div v-if="analysisProgress.estimatedTime > 0" class="estimated-time">
                                <span class="time-icon">⏱️</span>
                                <span class="time-text">预计剩余: {{ analysisProgress.estimatedTime }}秒</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分析结果区域 -->
            <div v-if="analysisResults.length > 0" class="results-section">
                <div class="section-card">
                    <div class="results-header">
                        <h3 class="section-title">🎯 AI分析结果</h3>
                        <button @click="exportToPDF"
                                :disabled="exportingPDF"
                                class="export-pdf-btn">
                            <span v-if="exportingPDF">📄 导出中...</span>
                            <span v-else>📄 导出PDF</span>
                        </button>
                    </div>
                    
                    <!-- 可视化图表 -->
                    <div class="chart-container">
                        <h4 v-if="chartData">📈 数据可视化</h4>
                        <div id="analysisChart" class="analysis-chart"></div>
                    </div>

                    <!-- 调试信息 -->
                    <div v-if="!chartData && analysisResults.length > 0" class="debug-info" style="background: rgba(255,255,255,0.1); padding: 10px; margin: 10px 0; border-radius: 5px;">
                        <p style="color: #fff; margin: 0;">⚠️ 图表数据加载中或加载失败，请检查控制台信息</p>
                    </div>
                    
                    <!-- AI分析报告 -->
                    <div class="analysis-reports">
                        <div v-for="(result, index) in analysisResults" 
                             :key="index" 
                             class="analysis-report">
                            <div class="report-header">
                                <h4>{{ result.title }}</h4>
                                <span class="report-type">{{ result.type }}</span>
                                <span v-if="result.fallback" class="fallback-indicator" title="离线分析结果">🛡️</span>
                            </div>
                            <div class="report-content">
                                <div class="analysis-text">{{ result.analysis }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 智能对话区域 -->
            <div class="chat-section">
                <div class="section-card">
                    <h3 class="section-title">💬 智能AI助手</h3>

                    <!-- 输入区域 -->
                    <div class="chat-input-area">
                        <div class="input-group">
                            <input
                                v-model="chatQuestion"
                                @keyup.enter="handleUserQuery"
                                :disabled="chatLoading"
                                type="text"
                                placeholder="请输入您的问题，我可以回答任何问题..."
                                class="chat-input"
                            >
                            <button
                                @click="handleUserQuery"
                                :disabled="chatLoading || !chatQuestion.trim()"
                                class="chat-send-btn"
                            >
                                <span v-if="chatLoading">思考中...</span>
                                <span v-else>发送</span>
                            </button>
                        </div>
                    </div>

                    <!-- 对话历史区域 -->
                    <div class="chat-history-area">
                        <div v-if="chatHistory.length === 0 && !chatLoading" class="empty-chat">
                            <p>💡 您可以询问关于数据的任何问题，比如：</p>
                            <ul>
                                <li>用户主要分布在哪些年龄段？</li>
                                <li>哪个地区的收入最高？</li>
                                <li>市场趋势如何？</li>
                            </ul>
                        </div>

                        <div class="chat-messages">
                            <div
                                v-for="(message, index) in chatHistory"
                                :key="index"
                                :class="['chat-message', message.type === 'user' ? 'user-message' : 'ai-message']"
                            >
                                <div class="message-header">
                                    <span class="message-sender">
                                        {{ message.type === 'user' ? '👤 您' : '🤖 AI助手' }}
                                    </span>
                                    <span class="message-time">
                                        {{ formatTime(message.timestamp) }}
                                    </span>
                                </div>
                                <div class="message-content">
                                    {{ message.content }}
                                </div>
                            </div>

                            <!-- 加载指示器 -->
                            <div v-if="chatLoading" class="chat-message ai-message loading-message">
                                <div class="message-header">
                                    <span class="message-sender">🤖 AI助手</span>
                                </div>
                                <div class="message-content">
                                    <div class="loading-indicator">
                                        <div class="loading-dots">
                                            <span></span>
                                            <span></span>
                                            <span></span>
                                        </div>
                                        <span>正在思考中...</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </main>

        <!-- 页面底部 -->
        <footer class="dashboard-footer">
            <p>&copy; 2025 共享充电宝数据仓库项目 - AI智能分析</p>
        </footer>
    </div>

    <!-- Vue应用脚本 -->
    <script>
        // 添加全局错误处理
        window.addEventListener('error', function(e) {
            console.error('Global error:', e.error);
        });

        window.addEventListener('unhandledrejection', function(e) {
            console.error('Unhandled promise rejection:', e.reason);
        });

        console.log('Loading Vue app...');
    </script>
    <script src="./js/ai-analysis.js"></script>
</body>
</html>
